/*
产品库-商品分类
*/
<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header>
      <el-button type="primary" @click="handleAddUpdate('add')" v-repeatClick>添加</el-button>
      <el-button @click="handleBeforeUpdate('down')" v-repeatClick>添加下级</el-button>
      <el-button @click="handleBeforeUpdate('mod')" v-repeatClick>修改</el-button>
      <!-- <el-button>上移</el-button>
      <el-button>下移</el-button> -->
      <el-button @click="enabled(false)">禁用</el-button>
      <el-button @click="enabled(true)">启用</el-button>
      <el-button @click="productView" v-repeatClick>查看</el-button>
      <el-button @click="getProduct" v-repeatClick>刷新</el-button>
      <el-button type="danger" @click="delProduct" v-repeatClick>删除</el-button>
    </my-header>

    <!-- 列表区 -->
    <el-card style="flex: 1;">
      <div class="app-page">
        <!-- 搜索区 -->
        <div class="content-flex">
          <div>
            <el-form ref="search" :model="search" inline size="small">
              <el-form-item label="" prop="typeName">
                <el-input
                  placeholder="搜索:分类名称"
                  v-model="search.typeName"
                  style="width: 200px"
                  clearable
                >
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="enabled">
                <el-select
                  clearable
                  v-model="search.enabled"
                  placeholder="是否启用"
                  style="width: 100px"
                >
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="query_batchId">
                <el-button type="primary" round @click="searchPage">搜索</el-button>
                <el-button type="warning" round @click="$refs.search.resetFields()">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <!-- 列表区 -->
        <div style="flex: 1">
          <el-table
            height="100%"
            stripe
            highlight-current-row
            ref="multipleTable"
            @row-dblclick="handleRowDbclick"
            @selection-change="handleSelectionChange"
            :data="treeData"
            row-key="id"
            border
            :default-expand-all="false"
            :tree-props="{children: 'childrenTypes', hasChildren: 'hasChildren'}">
            <el-table-column type="index" width="55" align="center"></el-table-column>
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="typeName" label="商品分类名称" sortable></el-table-column>
            <el-table-column label="启用" sortable prop="enabled" align="center" width="100">
              <template slot-scope="scope">
                      <span style="font-size: 20px">
                        <i class="el-icon-circle-check" style="color: #67c23a" v-if="scope.row.enabled"></i>
                        <i class="el-icon-circle-close" style="color: #f56c6c" v-else></i>
                      </span>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" sortable prop="createTime" width="200" align="center">
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页区 -->
        <div style="margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100, 200, 500, 1000]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>

      </div>
    </el-card>

    <!-- 添加商品分类信息 -->
    <el-dialog
      :title="title + '商品分类'"
      :visible.sync="dialogFormVisible"
      v-dialog-drag
      :close-on-click-modal="false"
      @close="restForm"
      width="500px"
    >
      <el-form
        size="small"
        :model="goodsTypeForm"
        label-position="left"
        label-width="80px"
        ref="goodsTypeForm"
        :rules="goodsTypeRules"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="上级名称">
              <span>{{goodsTypeForm.parentTypeName}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="typeName" label="名称">
              <el-input v-model="goodsTypeForm.typeName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="typeSpell" label="拼音">
              <el-input v-model="goodsTypeForm.typeSpell"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" style="text-align: right">
            <el-form-item>
              <el-checkbox v-model="goodsTypeForm.enabled">启用</el-checkbox>
              <el-button style="margin-left: 10px" @click="restForm">重置</el-button>
              <el-button type="primary" @click="submit">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <!-- 查看商品分类信息 -->
    <el-dialog title="查看商品分类信息" :visible.sync="dialogViewVisible"  :close-on-click-modal="false" v-dialog-drag>
      <el-tabs type="card">
        <el-tab-pane v-for="item in multipleSelection" :key="item.id" :label="item.typeName">
          <el-form>
            <el-col :span="24">
              <el-form-item label="上级名称：">{{ item.parentTypeName }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="名称：">{{ item.typeName }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="启用：">{{ item.enabled ? '是' : '否' }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="拼音：">{{ item.typeSpell }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序号：">{{ item.typeLevel }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建人：">{{ item.createUser }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建时间">{{ item.createTime }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最后修改人">{{ item.updateUser }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最后修改时间">{{ item.updateTime }}</el-form-item>
            </el-col>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
let search = {
  //类型名称
  typeName: '',
  //是否启用
  enabled: '',
}
let goodsTypeForm = {
  id:0,
  //商品类型上级id
  parentType: 0,
  //商品类型上级名称
  parentTypeName: "",
  //商品类型级别(排序号)
  // typeLevel: "",//传空
  typeLevel: 0,
  //商品类型名称
  typeName: "",
  //商品类型拼音
  typeSpell: "",
  //是否启用
  enabled: true,
}
import myHeader from '@/components/pageHEader/pageHeader'
import {
  getGoodsType,
  goodsTypeAdd,
  goodsTypeMod,
  goodsTypeDel,
  disableOrEnableGoodsType,
} from "@/api/parts/mailfree/goodstype";
export default {
  name: 'consigneebook',
  components: {
    myHeader
  },
  data() {
    return {
      pageSize: 20,
      currentPage: 1,
      total: 0,
      treeData: [],
      defaultProps: {
        value:'id',
        children: 'childrenTypes',
        label: 'typeName'
      },
      //表格选中
      multipleSelection: [],
      //搜索
      search: this.cloneObj(search),
      //商品分类对话框
      dialogFormVisible: false,
      title: '添加',
      goodsTypeRules:{
        //商品分类名称
        typeName: [this.$RegExp.required('名称不能为空')],
      },
      goodsTypeForm:this.cloneObj(goodsTypeForm),
      disabled:false,
      //查看门店
      dialogViewVisible: false,
    }
  },
  mounted() {
    this.getProduct();
  },
  methods: {
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getProduct();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getProduct();
    },
    //获取商品分类所有数据、刷新
    getProduct() {
      let query = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        typeName: this.search.typeName,
        enabled: this.search.enabled,
      }
      getGoodsType(query).then(resp=>{
        this.treeData = resp.data.records
        this.total = resp.data.total;
      })
    },
    //搜索
    searchPage(){
      this.currentPage = 1
      this.pageSize = 20
      this.getProduct()
    },
    handleBeforeUpdate(type){
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      if (this.multipleSelection.length > 1) {
        this.tip("只能勾选表格中的一条数据");
        return;
      }
      this.handleAddUpdate(type,this.multipleSelection[0])
    },
    //添加或修改商品分类信息
    handleAddUpdate(type,row) {
      let select = row
      if (type=='add'){
        if (this.multipleSelection.length > 1) {
          this.tip('只能勾选表格中的一条数据')
          return
        }
        this.title = '添加';
        this.goodsTypeForm = this.cloneObj(goodsTypeForm)
        this.dialogFormVisible = true;
      }else{
        this.dialogFormVisible = true;
        if (type=='mod') {
          this.handleModform(select, this.goodsTypeForm);
          this.title = '修改';
        } else {
          this.title = '添加';
          this.goodsTypeForm = this.cloneObj(goodsTypeForm)
          this.goodsTypeForm.parentType = select.id
          this.goodsTypeForm.typeLevel = select.typeLevel + 1
          this.goodsTypeForm.parentTypeName = select.typeName
        }
      }
    },
    //确定商品分类信息按钮
    submit() {
      this.$refs['goodsTypeForm'].validate((valid) => {
        if (valid) {
          let submit = Object.assign(
            this.goodsTypeForm,
          );
          let request;
          if (this.title == '添加') {
            request = goodsTypeAdd(submit);
          } else {
            request = goodsTypeMod(submit);
          }
          request.then((resp) => {
            this.$message.success(resp.message || '成功');
            this.dialogFormVisible = false;
            this.getProduct();
          });
        }
      })
    },
    //查看商品分类信息
    productView() {
      if (!this.multipleSelection.length) {
        this.tip()
        return
      }
      this.dialogViewVisible = true;
    },
    //删除商品分类信息
    delProduct() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      this.confirm().then(() => {
        goodsTypeDel(this.multipleSelection.map((item) => item.id)).then(
          (resp) => {
            this.$message.success(resp.message || "成功");
            this.getProduct();
          }
        );
      });
    },
    //启用或禁用商品分类信息
    enabled(enabled) {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      let addressee = this.multipleSelection.map((item) => item.id);
      let tip;
      if (enabled) {
        tip = "此操作将启用商品分类, 是否继续?";
      } else {
        tip = "此操作将禁用商品分类, 是否继续?";
      }
      this.confirm(tip).then(() => {
        disableOrEnableGoodsType(addressee,{enabled}).then((resp) => {
          this.$message.success(resp.message || "成功");
          this.getProduct();
        });
      });
    },
    //表格双击修改
    handleRowDbclick(row) {
      this.handleAddUpdate('mod',row);
    },
    //点击选中框选中商品分类信息
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //重置表单信息
    restForm() {
      this.$nextTick(() => {
        if (this.$refs.goodsTypeForm) this.$refs.goodsTypeForm.resetFields();
      });
    },
  }
}
</script>

<style scoped lang="scss">

</style>
